import React from 'react';
import InputItem from 'antd-mobile/lib/input-item';
import List from 'antd-mobile/lib/list';
import Toast from 'antd-mobile/lib/toast';
import Picker from 'antd-mobile/lib/picker';
import { checkMobile, checkEmail } from 'shared/utils/checkChars';
import InvoiceButtonGroup from '../InvoiceButtonGroup';
import { addInvoiceApi } from '../../api';
import './index.less';

const tabselected = require('src/static/tabselected.png');

export default class NormalInvoiceForm extends React.PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      invoiceType: '个人',
      formData: {
        invoice_type: 1,
        invoice_info: '商品详细',
        ...props.formData
      }
    }
  }

  componentWillReceiveProps({ formData }) {
    this.setState({ formData })
  }

  handleChange = (key, value) => {
    if (key === 'invoiceType') {
      this.setState({ invoiceType: value })
      return;
    }
    const formData ={...this.state.formData};
    formData[key] = value;

    this.setState({ formData });
  }

  handleSubmit = () => {
    const { formData, invoiceType } = this.state;
    if (invoiceType === '个人') {
      formData.title = '个人'
    } else {
      const { idcode = '' } = formData;
      const idCodeLength = idcode.length;
      if (idCodeLength !== 15 || idCodeLength !== 17 || idCodeLength !== 18 || idCodeLength !== 20) {
        Toast.fail('企业识别号不正确')
        return;
      }
    }
    const { receiver_mobile } = formData;
    if (!receiver_mobile || receiver_mobile.length < 11) {
      Toast.fail('手机号码必须为11位')
      return;
    }

    if (!checkMobile(receiver_mobile)) {
      Toast.fail('手机号码格式不正确')
      return;
    }

    const { receiver_email } = formData
    if (!checkEmail(receiver_email)) {
      Toast.fail('邮箱格式不正确');
      return;
    }

    addInvoiceApi(formData).then((res) => {
      if (res.code === 1000) {
        __self.history.push(this.props.backToLink)
      } else {
        Toast.fail('保存失败，参数错误')
      }
    })
  }

  render() {
    const { invoiceType } = this.state;
    const { title, idcode, receiver_mobile, receiver_email } = this.state.formData;
    return (
      <div className="normal-invoice-form">
        <List className='form-item'>
          <div className="am-list-item am-input-item am-list-item-middle invoice-type">
            <div className="am-list-line">
              <div className="am-input-label am-input-label-5">
                <span>发票抬头类型<sup>*</sup></span>
              </div>
              <div className="am-input-control">
                <Picker
                  data={[{ value: "个人", "label": "个人" }, { value: "企业", "label": "企业" }]}
                  onChange={(value) =>{ this.handleChange('invoiceType', value[0]) }}
                  value={[invoiceType]}
                  cols={1}
                  className="forss"
                >
                  <List.Item arrow="horizontal" />
                </Picker>
              </div>
            </div>
          </div>
          {
            invoiceType === "企业" &&
            <InputItem
              placeholder="个人"
              value={title}
              onChange={(value) => { this.handleChange('title', value) }}
            >
              <span>发票抬头<sup>*</sup></span>
            </InputItem>
          }
          {
            invoiceType === "企业" &&
            <InputItem
              placeholder="个人发票请填写身份证号"
              type="number"
              value={idcode}
              onChange={(value) => { this.handleChange('idcode', value) }}
              maxLength={20}
            >
              <span>企业识别号<sup>*</sup></span>
            </InputItem>
          }

          <div className="am-list-item am-input-item am-list-item-middle normal-invoice-content">
            <div className="am-list-line">
              <div className="am-input-label am-input-label-5">
                <span>发票内容<sup>*</sup></span>
              </div>
              <div className="am-input-control">
                <span>商品详细<img src={tabselected} alt='' /></span>
                <span>发票内容将显示详细商品名称与价格信息</span>
              </div>
            </div>
          </div>
          <InputItem
            value={receiver_mobile}
            onChange={(value) => { this.handleChange('receiver_mobile', value) }}
            maxLength={11}
            type="number"
          >
            <span>收票人手机<sup>*</sup></span>
          </InputItem>
          <InputItem
            value={receiver_email}
            onChange={(value) =>{ this.handleChange('receiver_email', value) }}
          >
            <span>收票人邮箱<sup>*</sup></span>
          </InputItem>
        </List>

        <InvoiceButtonGroup
          onSubmit={this.handleSubmit}
          backToLink={this.props.backToLink}
        />
      </div>
    )
  }
}